<template>
    <el-autocomplete
        v-model="option"
        :fetch-suggestions="search"
        :placeholder="placeholder"
        style="width:100%"
        @change="handleChange"
        @select="handleSelect"
    />
</template>
<script lang="ts" setup>
const model = ref({
    prop: 'value',
    event: 'change'
})
const emits = defineEmits(["change"])
const props = defineProps({
    value: {
        type: String,
        default: () => {
            return ''
        }
    },
    placeholder: {
        type: String,
        default: () => {
            return '对数字和日期格式化'
        }
    },
    data: {
        type: Array,
        default: () => {
            return []
        }
    }
})
const option = ref<String>("")
watch(() => props.value, (val) => {
    option.value = val
})
option.value = props.value

function search(str, cb) {
    const restaurants = props.data
    if (str === null) {
        cb(restaurants)
    } else {
        let results = restaurants.filter(function (ele: any) {
            return ele.value.toLowerCase().indexOf(str.toLowerCase()) > -1
        })
        cb(results)
    }
}

function handleChange(val) {
    option.value = val
    emits('change', val)
}

function handleSelect(val) {
    option.value = val.value
    emits('change', val.value)
}
</script>
<style>
</style>
